<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/admin/font.css">
    <link rel="stylesheet" href="../css/admin/xadmin.css">
    <script type="text/javascript" src="../js/jquery-3.2.1/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../js/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="../js/checkAdmin.js"></script>
</head>


<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" id="uId" name="uId" required="" style="display:none;" autocomplete="off"
                            class="layui-input"></div>
                </div>

                <div class="layui-form-item">
                    <label for="uAccount" class="layui-form-label">
                        <span class="x-red">*</span>账号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="uAccount" name="uAccount" required="" lay-verify="nikename"
                            autocomplete="off" class="layui-input"></div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>将是你的唯一登录名，请谨慎修改</div>
                </div>

                <div class="layui-inline" style="top: -9px;">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>性别</label>
                    <div class="layui-input-block" id="kuang">
                        <input type="radio" name="sex"  value="1" title="男" lay-filter="ChoiceRadio">
                        <input type="radio" name="sex"  value="0" title="女" lay-filter="ChoiceRadio">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="phone" class="layui-form-label">
                        <span class="x-red">*</span>手机号</label>
                    <div class="layui-input-inline">
                        <input type="tel" id="phone" name="phone" required="" lay-verify="phone" autocomplete="off"
                            class="layui-input"></div>
                </div>
                <div class="layui-form-item">
                    <label for="email" class="layui-form-label">
                        <span class="x-red">*</span>邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" id="email" name="email" required="" lay-verify="email" autocomplete="off"
                            class="layui-input"></div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>邮箱</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-item">
                        <label for="L_repass" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="edit" lay-submit="">修改</button></div>
                </div>
            </form>
        </div>
    </div>

    <script>
        layui.use(['form', 'layer', 'jquery'],
            function () {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;

                // 取值
                var storage = window.sessionStorage;
                // 想要用sessionStorage存储对象，必须先将对象转化为json字符串
                var lineData = JSON.parse(storage.getItem('lineData'));
                // 将数据显示到表格中
                $('#uId').val(lineData.uId);
                $('#uAccount').val(lineData.uAccount);
                $('#sex').val(lineData.sex);
                $('#phone').val(lineData.phone);
                $('#email').val(lineData.email);
                if(lineData.sex == 0){
                    $("input[name=sex][value=0]").prop("checked",true)
                    console.log("女");
                }else{
                    $("input[name=sex][value=1]").prop("checked",true)
                    console.log("男");
                }
                form.render(); //更新全部

                // 验证手机号规范
                $("#phone").blur(function () {
                    var pp = $('#phone').val();
                    var mobile = /^1\d{10}$/;
                    if (!mobile.test(pp)) {
                        layer.msg('请输入正确手机号', { icon: 5 });
                        return false;
                    }
                });
                

                //自定义验证规则
                form.verify({
                    nikename: function (value) {
                        if (value.length < 3 || value.length > 12) {
                            return '账号必须在4-11个字符之间字符啊';
                        }
                    },
                    pass: [/(.+){6,12}$/, '密码必须6到12位'],
                    repass: function (value) {
                        if ($('#L_pass').val() != $('#L_repass').val()) {
                            return '两次密码不一致';
                        }
                    }
                });

                // 监听单选框
                // form.on('radio(ChoiceRadio)', function (data) {
                //     console.log(data.elem); //得到 radio 原始 DOM 对象
                //     console.log(data.value); //被点击的 radio 的 value 值
                // });

                //监听提交
                form.on('submit(edit)', function (data) {
                    console.log(data.field)
                    // 发送修改数据
                    $.ajax({
                        url: "http://127.0.0.1:8001/after/user/updateById"
                        , type: "post"
                        // 不写就直接报415
                        , contentType: 'application/json;charset=UTF-8'
                        , data: JSON.stringify(data.field)
                        , success: function (datas) {
                            if (datas.data != null) {
                                layer.alert("修改成功", {
                                    icon: 6
                                },
                                    function () {
                                        // 获取父窗口
                                        window.parent.location.reload();
                                        // 获得frame索引
                                        var index = parent.layer.getFrameIndex(window.name);
                                        //关闭当前frame
                                        parent.layer.close(index);
                                    });
                                return false;
                            }
                            layer.msg('修改失败', { time: 1000 });
                        }
                    });
                    return false;
                });
            });
    </script>

</body>

</html>